<template>
  <view>
    <view v-if="swiperList.length" class="homeSwiper" style="margin: 30rpx auto">
      <swiper class="homeSwiper-swiper" :indicator-dots="false" :autoplay="true" :circular="false" :vertical="false"
        :interval="2000" :duration="500" :previous-margin="0 + 'px'" :next-margin="0 + 'px'" @change="onChange"
        style="height: 300rpx">
        <block v-for="(item, index) in swiperList" :key="index">
          <swiper-item class="homeSwiper-swiper__item" @tap.stop="handleTap" :data-index="index">
            <view class="homeSwiper-swiper__image" style="padding: 0rpx 30rpx">
              <image :data-index="index" :data-key="item"
                class="skeleton--animate homeSwiper-swiper--angle2 homeSwiper-swiper__boxNM homeSwiper-swiper__angle"
                :src="item" mode="scaleToFill" :lazy-load="true"></image>
              <!-- 骨架屏，体验有问题，暂时注释 -->
              <!-- <skeleton height="{{height/2}}" loaded="{{item.loaded}}" skeletonKey="{{item.img}}">
          </skeleton> -->
            </view>
          </swiper-item>
        </block>
      </swiper>
      <view class="homeSwiper-swiper__indicator homeSwiper-swiper__icat1">
        <text v-for="(ix, idx) in swiperList.length" :key="idx"
          :class="curent === idx ? 'homeSwiper-swiper__icat1--active' : ''"></text>
      </view>
    </view>
    <view class="title">
      <view class="line"></view>
      <view class="text">图片上传</view>
    </view>
    <view class="photo_list">
      <view v-for="(item, index) in originPhotos" :key="index" class="item">
        <image :src="item" mode="aspectFill" class="photo"></image>
        <view class="item_btn" @tap="handleDelPhoto" :data-index="index">删除</view>
      </view>
      <view class="item" @tap="handleTakePhoto" v-if="originPhotos.length<3">
        <image src="https://oss-tencent.bgniao.cn/api/fd4ad3fe6e3548ab286614cb6591e4b.png" mode="aspectFill"></image>
      </view>
    </view>
    <view class="title">
      <view class="line"></view>
      <view class="text">活动说明</view>
    </view>
    <view class="preInstructions">
      <text class="text">{{ recyclingsetting.activityDesc }}</text>
    </view>
    <view class="bottom" @tap="tijiao" :style="'background-image:url(' + recyclingsetting.submitImg + ')'"></view>
    <u-popup :show="showCoupon" mode="center" @close="onClose" custom-style="background-color: transparent">
      <view class="card">
        <image :src="couponimg"></image>
        <view class="text">
          恭喜您获得
          <text>{{ originPhotos.length }}</text>
          张优惠券
        </view>
        <view class="btn" @tap.stop="backHome"></view>
      </view>
      >
    </u-popup>
    <u-popup :show="isshow" mode="center" custom-style="background-color:transparent;" @close="cancel">
      <view class="popup">
        <image :src="homePromptBgImg"></image>
        <view class="close" @tap="cancel"></view>
        <view class="btn" @tap="topage"></view>
      </view>
    </u-popup>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    uploadFile
  } from "@/utils/upload";
  import {
    addNewRecycling
  } from "@/api/modules/global";
  import {
    navtofun
  } from "@/utils/navtofun";
  import {
    isArray
  } from 'lodash';

  @Component({})
  export default class Recycling extends Vue {
    recyclingsetting: any = {}
    type: string = ""
    swiperList: Array < any > = []
    curent: number = 0
    photos: Array < any > = []
    showCoupon: boolean = false
    originPhotos: Array < any > = []
    couponimg: string = ""
    isshow: boolean = false
    homePromptBgImg: string = ""
    // 页面周期函数--监听页面加载
    async onLoad() {
      await this.$store.dispatch('settingStore/getRecyclingSetting');
      const {
        pageCarousels,
        homePromptBgImg,
      } = this.$store.state.settingStore.recyclingsetting;
      const swiperList = pageCarousels.split(",");
      this.setData({
        recyclingsetting: this.$store.state.settingStore.recyclingsetting,
        swiperList,
        homePromptBgImg,
      });
    }

    /**
     * 轮播切换
     */
    onChange(e) {
      this.setData({
        curent: e.detail.current,
      });
    }

    tijiao() {
      const articleImgs = this.originPhotos.join(",");
      addNewRecycling({
          articleImgs: articleImgs
        })
        .then(res => {
          this.setData({
            couponimg: res,
            showCoupon: true,
          });
        })
        .catch(err => {
          if (err === "10086") {
            this.setData({
              isshow: true,
            });
          } else {
            this.$Popup.toast(err);
          }
        });
    }

    onClose() {
      this.setData({
        showCoupon: false,
      });
    }

    backHome() {
      const item = {
        append: "mall",
        id: +this.$store.state.settingStore.currentPageId,
        linkUrl: "/pages/index/index",
        name: "mall",
        sortIndex: 1,
        text: "商超",
        type: 2,
        url: "/pages/index/index",
        selectedIconPath: true,
      };
      item.append = item.name;
      item.url = item.linkUrl;
      uni.navigateBack({});
      navtofun(item, this);
    }

    handleTakePhoto() {
      if (this.photos.length >= 3) {
        return this.$Popup.toast("已达到上传上限");
      }
      uni.chooseImage({
        count: 3 - this.originPhotos.length,
        sizeType: ["original", "compressed"],
        success: res => {
          const tempFilePaths = res.tempFilePaths;
          if (isArray(tempFilePaths)) {
            for (const i in tempFilePaths) {
              const photos = this.photos;
              photos.push(tempFilePaths[i]);
              this.uploadPhoto(tempFilePaths[i]);
            }
          }
        },
      });
      // .then(({ tempFilePaths: [url] }) => {
      //   const photos = this.data.photos;
      //   photos.push(url);
      //   this.uploadPhoto(url);
      //   this.setDataSmart({
      //     photos,
      //   });
      // })
      // .catch(() => null);
    }

    // 上传图片
    uploadPhoto(tempFilePaths) {
      this.setData({
          uploading: true
        }, () =>
        uni.showLoading({
          title:"上传中..."
        })
      );

      uploadFile(tempFilePaths)
        .then(data => {
          const originPhotos = this.originPhotos.concat(data);
          this.setData({
              originPhotos,
              uploading: false,
            },
            () => uni.hideLoading(),
          );
        })
        .catch(() => {
          this.$Popup.toast("上传失败");
        });
    }

    handleDelPhoto({
      currentTarget: {
        dataset: {
          index
        },
      },
    }) {
      const photos = this.photos;
      const originPhotos = this.originPhotos;
      photos.splice(index, 1);
      originPhotos.splice(index, 1);
      this.setData({
        photos,
        originPhotos,
      });
    }

    cancel() {
      this.setData({
        isshow: false,
      });
    }

    topage() {
      this.setData({
        isshow: false,
      });
      uni.redirectTo({
        url: "/subcontract/pages/mysend/mysend",
      });
    }
  }
</script>

<style lang="scss" scoped>
  @include b(homeSwiper) {
    background-color: #ffffff;
    position: relative;
  }

  @include b(homeSwiper-swiper) {
    height: 100%;

    @include e(item) {
      height: 100%;
    }

    @include e(image) {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-top: 2px;

      image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    @include m(angle1) {
      border-radius: 0rpx;
    }

    @include m(angle2) {
      border-radius: 20rpx;
    }

    @include e(boxNM) {
      box-shadow: none;
    }

    @include e(boxCP) {
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    }

    @include e(corners) {
      border-radius: 0px;
    }

    @include e(angle) {
      border-radius: 7px;
    }

    @include e(indicator) {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: 10px;
      // border: 1px solid red;
      height: 20px;
      width: 100%;
      box-sizing: border-box;
    }

    @include e(icat1) {
      text {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #ebedf0;
        opacity: 0.3;
        margin-right: 6px;
        border-radius: 50%;
      }

      @include m(active) {
        opacity: 0.8 !important;
        background-color: #fff !important;
      }
    }

    @include e(icat2) {
      position: absolute;
      right: 0;
      bottom: 15px;
      display: block;

      text {
        float: right;
        box-sizing: border-box;
        padding: 5px 12px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 13px;
        border-radius: 16px;
      }
    }

    @include e(icat3) {
      text {
        display: inline-block;
        width: 22px;
        height: 3px;
        background-color: #ebedf0;
        opacity: 0.3;
        margin-right: 6px;
        border-radius: 4px;
      }

      @include m(active) {
        opacity: 0.8 !important;
        background-color: #fff !important;
      }
    }
  }

  @include b(contact-style) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .title {
    width: 100%;
    height: 60rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .line {
      width: 20rpx;
      height: 60rpx;
      background-color: #FF5028;
    }

    .text {
      font-size: 28rpx;
      line-height: 60rpx;
      margin-left: 30rpx;
    }
  }

  .photo_list {
    width: 700rpx;
    margin: 0 auto;
    height: 293rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .item {
      width: 160rpx;
      height: 233rpx;
      margin: 0 15rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 20rpx;
      }

      .item_btn {
        width: 110rpx;
        height: 50rpx;
        border-radius: 10rpx;
        background-color: #EEEEEE;
        font-size: 26rpx;
        color: #9E9E9E;
        text-align: center;
        line-height: 50rpx;
        margin-top: 20rpx;
      }
    }
  }

  .preInstructions {
    width: 100%;
    padding: 10rpx 40rpx;

    .text {
      width: 100%;
      height: 42rpx;
      display: 28rpx;
      line-height: 42rpx;
      color: #636363;
    }
  }

  .bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 98rpx;
    // background-color: #FF5028;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    line-height: 98rpx;
    background-size: 100% 100%;
  }

  .card {
    width: 612rpx;
    height: 695rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .text {
      width: 100%;
      font-size: 28rpx;
      color: #ffffff;
      position: absolute;
      top: 140rpx;
      left: 0;
      text-align: center;

      text {
        font-size: 55rpx;
        color: #FFE8C5;
      }
    }

    .btn {
      width: 80%;
      height: 80rpx;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 62rpx;
      margin: 0 auto;
      // background: rgba(0,0,0,0.3);
    }
  }

  .popup {
    width: 610rpx;
    height: 550rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .close {
      width: 60rpx;
      height: 60rpx;
      // background-color: rgba(0,0,0,0.3);
      position: absolute;
      top: 0;
      right: 0;
    }

    .btn {
      width: 420rpx;
      height: 70rpx;
      // background-color: rgba(0,0,0,0.3);
      position: absolute;
      bottom: 40rpx;
      right: 0;
      left: 0;
      margin: 0 auto;
    }
  }
</style>